<template>
  <div class="playback">
    <div class="playback-tite">
      <div class="flex">
        <div class="img-box">
          <img src="@/assets/ivr/http.svg" alt="" class="w-16 h-16" />
        </div>
        <div class="titles">{{ nodeName }}</div>
      </div>
      <div>
        <el-popover placement="bottom" trigger="click" width="100">
          <div class="node-list">
            <div class="p-8" @click="copyNode">复制</div>
            <el-divider style="margin: 4px 0" />
            <div class="p-8" @click.stop="delNode">删除</div>
          </div>
          <template #reference>
            <svg
              t="1744771665484"
              class="icon cursor-pointer"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5189"
              width="16"
              height="16"
            >
              <path
                d="M97.95349285 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614346 0 94.17807171 94.17807171 0 1 0-188.35614346 0Z"
                fill="#2c2c2c"
                p-id="5190"
              ></path>
              <path
                d="M510.81520458 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614344 0 94.17807171 94.17807171 0 1 0-188.35614344 0Z"
                fill="#2c2c2c"
                p-id="5191"
              ></path>
              <path
                d="M923.6769163 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614343 0 94.17807171 94.17807171 0 1 0-188.35614343 0Z"
                fill="#2c2c2c"
                p-id="5192"
              ></path>
            </svg>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="playback-content">
      <el-form :model="formState">
        <el-form-item label="节点名称" required>
          <el-input v-model="formState.name" @input="updateProperties" />
        </el-form-item>
        <el-form-item label="请求地址">
          <el-input
            v-model="formState.url"
            placeholder="请输入请求地址"
            @input="updateProperties"
          ></el-input>
        </el-form-item>

        <el-form-item label="请求方法">
          <el-select
            class="w-100%"
            v-model="formState.method"
            placeholder="请选择请求方法"
            @change="updateProperties"
          >
            <el-option :value="1" label="GET"></el-option>
            <el-option :value="2" label="POST"></el-option>
            <el-option :value="3" label="PUT"></el-option>
            <el-option :value="4" label="DELETE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数">
          <el-input
            v-model="formState.params"
            placeholder="请输入请求参数"
            @input="updateProperties"
          ></el-input>
        </el-form-item>
        <el-form-item label="响应结果获取字段">
          <el-input
            v-model="formState.result"
            placeholder="请输入响应结果获取字段"
            @input="updateProperties"
          ></el-input>
        </el-form-item>
        <h5 class="h-l">请求头部</h5>
        <el-table :data="formState.header" style="width: 100%">
          <el-table-column prop="name" label="名称">
            <template #default="scope">
              <span v-if="!scope.row.isisEditing">{{ scope.row.name }}</span>
              <el-input v-else class="!w-100px" v-model="scope.row.name" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="值">
            <template #default="scope">
              <span v-if="!scope.row.isisEditing">{{ scope.row.value }}</span>
              <el-input v-else class="!w-100px" v-model="scope.row.value" clearable></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button
                type="primary"
                v-if="!scope.row.isisEditing"
                link
                @click="editTable(scope.$index)"
                >编辑</el-button
              >
              <el-button type="primary" v-else link @click="keepSave(scope.$index)">保存</el-button>
              <el-button type="primary" link @click="add">新增</el-button>
              <el-button
                link
                size="mini"
                type="danger"
                v-if="scope.$index != 0"
                @click="handleDelete(scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, createVNode } from 'vue'
import { useIvrStore } from '@/store/modules/ivr'
import { generateRandomString } from '@/utils/node'
import { cloneDeep } from 'lodash-es'

const useStore = useIvrStore()
export default defineComponent({
  name: 'StartNode',
  inject: ['getNode', 'getGraph'],
  data() {
    return {
      formState: {
        name: '',
        method: 1,
        params: '',
        result: '',
        url: '',
        header: [
          {
            key: 0,
            name: '',
            value: '',
            isisEditing: false
          }
        ]
      },
      nodeName: '',
      id: 'http_'
    }
  },
  mounted() {
    const node = (this as any).getNode()
    const graph = (this as any).getGraph()
    const { nodes } = graph
    const index = nodes.findIndex((item) => item.id == node.id)
    const httpArr = nodes.filter((item) => item.properties.businessType == 8)
    const { method, params, result, header, name, nodeName, nodeIndex, url } =
      nodes[index].properties
    this.nodeName = nodeName + (nodeIndex - 1 == 0 ? '' : nodeIndex)

    Object.assign(this.formState, { method, params, result, header, name, url })
  },
  methods: {
    updateProperties(type) {
      const node = (this as any).getNode()
      const graph = (this as any).getGraph()
      const { nodes } = graph
      const index = nodes.findIndex((item) => item.id === node.id)
      if (index !== -1) {
        const updatedNode = { ...nodes[index].properties, ...this.formState }
        useStore.getLf.setProperties(node.id, updatedNode)
      }
    },
    // 删除节点
    delNode() {
      const node = (this as any).getNode()
      ElMessageBox.confirm('确定要删除此节点吗？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      }).then(() => {
        useStore.getLf.deleteNode(node.id)
      })
    },
    // 复制节点
    copyNode() {
      const node = (this as any).getNode()
      const CloneNode = useStore.getLf.cloneNode(node.id)
      useStore.getLf.changeNodeId(CloneNode.id, this.id + generateRandomString(6))
    },
    countHeight2() {
      const node = (this as any).getNode()
      const heightNum = (this.formState.header.length - 1) * 40
      useStore.getLf.setProperties(node.id, {
        height: 480 + heightNum
      })
    },
    // 计算高度
    countHeight() {
      const node = (this as any).getNode()
      const heightNum = this.formState.header.length * 40
      useStore.getLf.setProperties(node.id, {
        height: 480 + heightNum
      })
    },
    handleDelete(index) {
      this.formState.header.splice(index, 1)
      this.countHeight2()
      this.updateProperties()
    },
    editTable(index) {
      this.formState.header[index].isisEditing = true
    },
    keepSave(index) {
      this.formState.header[index].isisEditing = false
      this.updateProperties()
    },
    add() {
      this.countHeight()
      this.formState.header.push({
        key: `${this.count}`,
        name: '',
        value: '',
        isisEditing: false
      })
    }
  },
  computed: {
    count() {
      return this.formState.header.length
    }
  }
})
</script>
<style scoped>
.playback-content {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  padding: 20px;
}
.playback {
  padding: 16px;
  box-shadow: 0 2px 4px #1f23291f;
  border: 2px solid #fff !important;
  background: #ffffff;
  border-radius: 8px;
}
.img-box {
  background: #bebf6e;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 8px;
}
.playback-tite {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  justify-content: space-between;
}
.w-16 {
  width: 16px;
}
.h-16 {
  height: 16px;
}
.titles {
  font-size: 16px;
  color: #1f2329;
  font-weight: bold;
}
.flex {
  display: flex;
  align-items: center;
}
.p-8 {
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.h-l {
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}
.h-l:before {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 80%;
  content: '';
  background: #407fff;
}
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
